<template>
	<div class="card-item" @click="go">
		<div class="card-content">
			<div class="info">
				<div class="title">{{ obj.title }}</div>
				<div class="date">{{ obj.createTime | DF }}</div>
			</div>
			<div class="image">
				<img v-if="obj.fm" :src="obj.fm" />
				<img v-else src="https://byvoid.com/attachments/blog/roaming-jp/kafi-idu/moa-teiwen.jpg" />
			</div>
		</div>
	</div>
</template>

<script>
import { parseTime } from '@/utils/index.js';
export default {
	props: {
		obj:Object
	},
	filters: {
		DF(t) {
			return parseTime(t, '{y}-{m}-{d}');
		}
	},
	methods:{
		go(){
			this.$router.push("/blog-detail/"+this.obj.id)
		}
	}
};
</script>

<style lang="scss">
.card-item {
	cursor: pointer;
	&:hover{
		background-color: rgba(0,0,0,.03);
		.title{
			text-decoration: underline;
			text-underline-position: under;
			color:#145ca4;
		}
	}
	.card-content {
		display: flex;
		margin: 0 28px 0 35px;
		padding: 30px 0;
		border-bottom: 1px solid rgba(128, 128, 128, 0.12);
		align-items: center;
		.info {
			flex: 1;
			padding-right: 15px;
			font-family: lora,songti sc,stsong,simsun,serif;
			.title {
				padding-bottom: 10px;
				font-size: 30px;
				font-style: normal;
				font-weight: 400;
				margin-bottom: 10px;
				line-height: 1.5em;
			}
			.date {
				font-size: 16px;
				font-family: montserrat,roboto,source sans pro,helvetica,open sans,hiragino sans gb,stheiti,sans-serif;
			}
		}

		.image {
			width: 230px;
			height: 120px;
			overflow: hidden;
			user-select:none;
			img {
				&:hover{
					transform: scale(1.1);
				}
				width: 100%;
				height: 100%;
				user-select:none;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.card-item{
		padding: 0 2px;
		.card-content {
			display: flex;
			margin: 0 0 15px;
			padding: 0;
			border-bottom: none;
			align-items: center;
			flex-direction: column-reverse;
			.info {
				flex: 1;
				width: 100%;
				padding: 15px 20px;
				.title {
					padding-bottom: 0;
					font-size: 22px;
					margin-bottom: 5px;
					line-height: 1.5em;
				}
				.date {
					font-size: 14px;
				}
			}
		
			.image {
				width: 100%;
				height: 180px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
